<script setup lang='ts'>
import { UserFilled, Lock, BellFilled } from '@element-plus/icons-vue'
import { bg, avatar, currentWeek } from './utils/static'
import Motion from './utils/motion'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { loginRules } from './utils/rule'
import { userLogin } from '../../api/user'
import { setToken } from '../../utils/common'

const ruleFormRef = ref<FormInstance>()

const title = import.meta.env.VITE_LOGIN_TITLE

const loginForm = reactive({
  username: 'root',
  password: '3.14',
  verifyCode: '',
  verifyId: ''
})

const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  userLogin(loginForm).then(res => {
    setToken(res.token)
    router.push({ path: '/home' })
  }).catch(() => {
    ElMessage({
      showClose: true,
      message: '密码错误',
      type: 'error'
    })
  })
}

/**
* 路由实例
*/
const router = useRouter()
// console.log('1-开始创建组件-setup')
/**
* 数据部分
*/
const data = reactive({})
onBeforeMount(() => {
  // console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
  // console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({
  ...toRefs(data)
})

</script>
<template>
<img :src="bg" class="wave" />
  <div class="login-container">
    <div class="img">
      <component :is="currentWeek" />
    </div>
    <div class="login-box">
      <div class="login-form">
        <avatar class="avatar" />
        <Motion>
          <h2>{{title}}</h2>
        </Motion>

        <el-form
          size="large"
          ref="ruleFormRef"
          :model="loginForm"
          :rules="loginRules"
          @keyup.enter="onLogin(ruleFormRef)"
        >
          <Motion :delay="100">
            <el-form-item prop="username">
              <el-input
                :prefix-icon="UserFilled"
                clearable
                placeholder="账号"
                v-model="loginForm.username"
              />
            </el-form-item>
          </Motion>

          <Motion :delay="150">
            <el-form-item prop="password">
              <el-input
                :prefix-icon="Lock"
                clearable
                show-password
                v-model="loginForm.password"
                placeholder="密码"
              />
            </el-form-item>
          </Motion>

          <Motion :delay="200">
            <el-form-item prop="verifyCode">
              <el-input
                clearable
                placeholder="验证码"
                v-model="loginForm.verifyCode"
                :prefix-icon="BellFilled"
              >
                <template v-slot:append>
                  <div style="height:38px;"><img src="../../assets/ImageVerify.png" ></div>
                </template>
              </el-input>
            </el-form-item>
          </Motion>

          <Motion :delay="250">
            <el-form-item>
              <div class="w-full h-20px flex justify-between items-center">
                <el-checkbox >记住密码</el-checkbox>
                <el-button
                  link
                  type="primary"
                >
                  忘记密码?
                </el-button>

              </div>
              <el-button
                @click="onLogin"
                class="w-full mt-4"
                size="default"
                type="primary"
              >
                登录
              </el-button>
            </el-form-item>
          </Motion>

        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("../../style/login.css");
</style>

<style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
.w-full{
  width: 100%;
}
.h-20px{
  height: 20px;;
}
.flex, [flex=""] {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.items-center, [items-center=""] {
    align-items: center;
}
.mt-4 {
    margin-top: 1rem;
}
</style>
